<template>
    <div>
      <!-- 查询区域 -->
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form-item label="主单号">
                <el-input v-model="form.mainOrderNumber" placeholder="请输入主单号"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form-item label="运单号">
                <el-input v-model="form.orderDetailNumber" placeholder="请输入运单号"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form-item label="货物名称">
                <el-input v-model="form.cargoName" placeholder="请输入货物名称"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="14">
            <el-form-item>
              <el-button type="primary" size="small" class="queryMainBtn" @click="getOrderList">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!--查询区域结束-->
      <!--列表开始-->
      <!-- 表格部分 -->
      <vxe-table border resizable stripe highlight-hover-row highlight-current-row show-overflow ref="xTable" height="300" align="center" :data="tableData">
        <vxe-table-column min-width="160" field="transportType" title="订单类型">
          <template scope="scope">
            <span v-if="scope.row.transportType === 0">包车</span>
            <span v-else>零担</span>
          </template>
        </vxe-table-column>
        <vxe-table-column min-width="160" field="detailStatus" title="运单状态">
          <!--0未接单，1已接单，2已转出，3已签收，4一键转干线5 转同城-->
          <template scope="scope">
            <span v-if="scope.row.status === 0">未接单</span>
            <span v-else-if="scope.row.status === 1">已接单</span>
            <span v-else-if="scope.row.status === 2">已转出</span>
            <span v-else-if="scope.row.status === 3">已签收</span>
          </template>
        </vxe-table-column>
        <vxe-table-column min-width="160" field="orderDetailNumber" title="运单号"></vxe-table-column>
        <vxe-table-column min-width="160" field="mainOrderNumber" title="主单号"></vxe-table-column>
        <vxe-table-column min-width="160" field="mainOrderNumber" title="运单图片"></vxe-table-column>
        <vxe-table-column min-width="160" field="gmtCreated" title="下单时间"></vxe-table-column>
        <vxe-table-column min-width="160" field="vehicleNumber" title="接货车牌号"></vxe-table-column>
        <vxe-table-column min-width="160" field="vehicleType" title="车型"></vxe-table-column>
        <vxe-table-column min-width="160" field="cargoName" title="货物名称"></vxe-table-column>
        <vxe-table-column min-width="160" field="weight" title="签收时间"></vxe-table-column>
        <vxe-table-column min-width="160" field="shipmentName" title="入驻商名称"></vxe-table-column>
        <vxe-table-column min-width="160" field="shipmentPhone" title="入驻商电话"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeople" title="发货人"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeoplePhone" title="发货人电话"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingAddress" title="发货方地址"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeople" title="收货人"></vxe-table-column>
        <vxe-table-column min-width="160" field="loadingPeoplePhone" title="收货人电话"></vxe-table-column>
        <vxe-table-column min-width="160" field="deliveryAddress" title="收货地址"></vxe-table-column>、
        <vxe-table-column min-width="160" field="loadingPeople" title="装货时间"></vxe-table-column>
        <vxe-table-column min-width="160" field="upstreamCost" title="上游运费"></vxe-table-column>
        <vxe-table-column min-width="160" field="upstreamCost" title="运费结算方式">
          <template scope="scope">
            <span v-if="scope.row.paymentType === 0">到付</span>
            <span v-else>现付</span>
          </template>
        </vxe-table-column>
        <vxe-table-column min-width="160" field="driverFreight" title="司机运费"></vxe-table-column>
        <vxe-table-column min-width="160" field="collectionDelivery" title="代收款"></vxe-table-column>
        <vxe-table-column min-width="160" field="collectionDelivery" title="代收款结算方式"></vxe-table-column>

        <vxe-table-column min-width="160" field="collectionDelivery" title="结算状态"></vxe-table-column>
        <vxe-table-column min-width="200" title="操作" fixed="right">
          <template slot-scope="scope">
            <el-tag size="small" v-show="scope.row.buttons.particularsCargoShow">货物详情</el-tag>
            <el-tag size="small" v-show="scope.row.buttons.orderDetailShow" type="success">运单跟踪</el-tag>
          </template>

        </vxe-table-column>
      </vxe-table>
      <!-- 分页功能 -->
      <vxe-pager :loading="loading" :current-page.sync="listQuery.pageNum" :page-size.sync="listQuery.pageSize" :total="listQuery.total"
                 :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                  @page-change="handlePageChange"/>
      <!--列表结束-->
      <!---->
    </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import { ajax } from "@/api/ctms";

Vue.use(VXETable,XEUtils,VXEUtils);


export default {
  name:"dispatchCars",
  components: {

  },
  created() {
    this.WaybillManagementList()
  },
  data() {
    return {
      loading: false,
      form: {pageNum:1,pageSize:10},
      tableData: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orderCode:"",
      type:0
    };
  },
  methods: {
    // 获取运单管理列表
    WaybillManagementList() {
      this.loading = true;
      ajax('/ntocc-ctms-api/ctmsOrderReport',"get", this.form).then((data) => {
        console.log(data)
        this.listQuery.total = data.data.total
        this.tableData = data.data.records
        this.loading = false;
        for(let item in this.tableData) {
          var buttons = {};
          var particularsCargoShow = true;
          var orderDetailShow = true;

          this.tableData[item]["buttons"] = {
            particularsCargoShow: particularsCargoShow,
            orderDetailShow:orderDetailShow
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.WaybillManagementList()
    },
    /*查询*/
    getOrderList(){
      this.WaybillManagementList();
    }

  }
}
</script>

<style lang="scss" scoped>
  .box {
    padding: 10px 10px 10px 0;
  }
  .queryMainBtn {
    width: 80px;
    margin: -5px 0 0 -50px;
    font-weight: bold;
  }
</style>
